<template>
	<view class="page_view">
		<view class="zhanwei"></view>
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower" class="scroll" :style="{height:scrollH+'px'}">
			<view class="list">
				<view class="list_item" v-for="(item,index) in articleList" :key="index" @click="go_detail(item.id)">
					<view class="list_item_top line-1">
						{{item.title}}
					</view>
					<view class="list_item_min flex">
						<!-- <rich-text class="list_item_min_left line-3" :nodes="item.content"></rich-text> -->
						<view class="list_item_min_left line-3">
							{{item.content}}
						</view>
						<image :src="ImgUrl + item.img" class="list_item_min_right" mode=""></image>
					</view>
					<view class="list_item_bottom">
						<text class="list_item_bottom_item">{{item.read_quantity}}阅读</text>
						<text class="list_item_bottom_item">{{item.comment_quantity}}评论</text>
						<text class="list_item_bottom_item">{{item.like_quantity}}点赞</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import getScrollHeight from "@/utils/utils.js";
	import { article } from '../../api/login.js';
	export default {
		data() {
			return {
				scrollH:'',
				articleList:[],
				page:1,
				last_page:0,
			}
		},
		computed:{
			ImgUrl(){
				console.log(this.$store.state.ImgUrl)
				return this.$store.state.ImgUrl
			},
		},
		onReady() {
			let t = this
			getScrollHeight.getScrollHeight('scroll').then(res=>{
				t.scrollH = res - 10
			})	
		},
		onShow() {
			this.page=1;
			this.getList();
		},
		methods: {
			scrolltolower(){
				if(this.page<this.last_page){
					this.page++;
					this.getList();
				}
			},
			getList(){
				article({
					page:this.page
				}).then(res=>{
					if(res.code == 200001){
						// this.articleList = res.data.data;
						let list = res.data.data;
						this.last_page = res.data.last_page;
						if(this.page==1){
							this.articleList = list;
						}else{
							this.articleList.push(...list);
						}
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			go_detail(id){
				uni.navigateTo({
					url:'/pages/PopularScienceDetail/PopularScienceDetail?id=' + id
				})
			}
		}
	}
</script>

<style>
.zhanwei{
	width: 100%;
	height: 20rpx;
	background: #F4F4F4;
}
.list{
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #fff;
}
.list_item{
	width: 100%;
	padding: 30rpx 0;
	box-sizing: border-box;
	border-bottom: 1rpx solid #F4F4F4;
}
.list_item_top{
	color: #222;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 32rpx;
	font-weight: 400;
}
.list_item_min{
	margin-top: 16rpx;
}
.list_item_min_left{
	width: calc(100% - 198rpx);
	color: #444;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
}
.list_item_min_right{
	width: 168rpx;
	height: 120rpx;
	border-radius: 8rpx;
	background: #ccc;
}
.list_item_bottom{
	color: #999;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	margin-top: 10rpx;
}
.list_item_bottom_item{
	margin-right: 20rpx;
}
</style>
